<template>
  <div class="table-wrapper">
    <el-button @click="showDialog">增加</el-button>
    <el-button @click="back">退出登陆</el-button>
    <myDialog
      @outerClose="outerClose"
      @outerSure="outerSure"
      @innerClose="innerClose"
      @innerSure="innerSure"
      :outerVisible="outerVisible"
      :innerVisible="innerVisible"
    ></myDialog>

    <my-table :tableData="tableData"></my-table>
    <myPage :total="total" :currentPage="currentPage" @handleCurrentChange="handleCurrentChange"></myPage>
  </div>
</template>

<script>
import { getAdd, getPage } from "@/api/api";
import myDialog from "@/components/dialog2.vue";
import myTable from "@/components/mytable";
import myPage from "@/components/mypage";
export default {
  components: {
    myDialog,
    myTable,
    myPage
  },
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      tableData: [],
      size: 5,
      total: 0,
      currentPage: 1
    };
  },
  mounted() {
    this.getPageData({});
  },
  methods: {
    back() {
      this.$router.push("/login");
    },
    // 请求分页数据
    getPageData({ page = 0, size = 5 }) {
      getPage({ page, size }).then(res => {
        // console.log(res, "res-------get");
        if (res.code === 0) {
          // console.log(res.data, "----------------data");
          this.tableData = res.data;
          this.total = res.total;
        }
      });
    },
    showDialog() {
      this.outerVisible = true;
    },
    outerClose() {
      this.outerVisible = false;
    },
    outerSure() {
      this.innerVisible = true;
    },
    async innerSure(data) {
      this.outerVisible = false;
      this.innerVisible = false;
      let resultAdd = await getAdd(data);
      // console.log(resultAdd, "resultAdd");
      if (resultAdd.code === 0) {
        this.getPageData({ page: this.currentPage - 1 });
      }
    },
    innerClose() {
      this.innerVisible = false;
    },
    // 用户点击的当前页数
    handleCurrentChange(val) {
      this.currentPage = val;
      let obj = {
        page: val - 1,
        size: this.size
      };
      this.getPageData({ ...obj });
    }
  }
};
</script>

<style lang="scss">
</style>